<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box1{
background-color: red;
width: 100px;
height: 100px;
    }
    .bianse{
        color: red;
    }
    li{
        list-style-type: none;
    }
</style>
<body>
    <div id="box" >
    <div id="box0" style="width: 100px;height: 100px;"  @mouseover="show=!show" @mouseout="show=!show">
        <div id="box1" v-show="show"></div>
    </div>
   
    </div>
    <div id="box2">
        <div  v-show="xian">
            用户名<input type="text">
            密码<input type="text">
        </div>
        <button @click="xian=true">登录</button>
        <button @click="xian=false">X</button>
    </div>
    <div id="box3">
        <div @click="res=0" :class="{'bianse':res===0}">微信支付</div>
        <div @click="res=1" :class="{'bianse':res===1}">支付宝支付</div>
    </div>
   <div id="box4">
    <button @click="ea=!ea,eb=false,ec=false">选项一</button>
    <button @click="eb=!eb,ea=false,ec=false">选项二</button>
    <button @click="ec=!ec,ea=false,eb=false">选项三</button>
    <div id="box41" v-show="ea" style="width: 200px;height: 100px;background-color: green;">1</div>
    <div id="box42" v-show="eb" style="width: 200px;height: 100px;background-color: green;">2</div>
    <div id="box43" v-show="ec" style="width: 200px;height: 100px;background-color: green;">3</div>
   </div>
   <div id="box5">
    <div style="width: 200px;height: 20px;border: 1px solid black;"  @click="rs=!rs" >{{rr}}</div>
    <ul>
        <li v-for="(v,k) in ra" v-show="rs" @click="rr = v ; rs = false">{{v}}</li>
    </ul>
   </div>
   <div id="box6">
    <input type="text" v-model="val1">
    <button @click="add">增加</button>
    <button @click="del">删除</button>
    <li v-for="(v,k) in arr">{{v}}</li>
   </div>
   <div id="box7">
    密码<input :type="ty?'text':'password'">
    <button @click="ty=!ty">切换</button>
   </div>
   <div id="box8">
    <textarea name="" id="" placeholder="textarea还剩余字数统计" v-model="zishu" maxlength="200"></textarea>
    <div>还剩{{200-zishu.length}}字数</div>
   </div>
</body>
<script src="vue.global.js"></script>
<script>
    const {createApp,ref}=Vue
    createApp({
        setup(){
         let show=ref(false)
         return{
            show
         }
        }        
    }).mount("#box")
    createApp({
        setup(){
         let xian=ref(false)
         return{
            xian
         }
        }        
    }).mount("#box2")
    createApp({
        setup(){
            let res=ref(0)
        return{
res
        }
    }
    }).mount("#box3")
    createApp({
        setup(){
         let ea=ref(false)
         let eb=ref(false)
         let ec=ref(false)
         return{
            ea,eb,ec
         }
        }        
    }).mount("#box4")
   
   createApp({
    setup(){
        let ra=ref(['选项一','选项二','选项三','选项四'])
        let rs=ref(false)
       let rr = ref('选项一')
        return{
            ra,rs,rr
        }
    }
   }).mount("#box5")

   createApp({
    setup(){
        let arr=ref([])
        let val1=ref('')
        function add(){
            arr.value.push(val1.value)
            val1.value=""
        }
        function del(){
            arr.value.splice(0,1)
        }
        return{
            arr,val1,add,del
        }
    }
   }).mount("#box6")

   createApp({
    setup(){
        
        let ty=ref(true)

     
    return{
        ty
    }
   
    }
   }).mount("#box7")

   createApp({
    setup(){
        let zishu=ref('')
       
        return{
            zishu
        }
    }
   }).mount("#box8")
</script>
</html>